<template>
  <el-dialog
    width="800px"
    v-model="inDialogData.show"
    :title="inDialogData.title"
    class="companyFormDialog"
  >
    <el-form
      :model="data"
      label-width="120px"
      class="company-form"
      ref="form"
      :rules="Rules"
      label-suffix="："
    >
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item
            prop="name"
            label="部门名称"
          >
            <el-input
              v-model="data.name"
              size="small"
            > </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="sort"
            label="排序"
          >
            <el-input-number
              v-model="data.sort"
              :min="1"
              :max="999"
              size="small"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item
            prop="director"
            label="负责人"
          >
            <el-input
              v-model="data.director"
              size="small"
            > </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="telphone"
            label="联系电话"
          >
            <el-input
              v-model="data.telphone"
              size="small"
            > </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item
            prop="companyId"
            label="所属公司"
          >
            <el-tree-select
              v-model="data.companyId"
              value-key="id"
              :data="companyData"
              check-strictly
              :render-after-expand="false"
              clearable
            >
              <template #default="{ data }">
                <el-option
                  :label="data.name"
                  :value="data.id"
                />
              </template>
            </el-tree-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="parentId"
            label="所属部门"
          >
            <el-tree-select
              v-model="data.parentId"
              value-key="id"
              :data="deptData"
              check-strictly
              :render-after-expand="false"
              clearable
            >
              <template #default="{ data }">
                <el-option
                  :label="data.name"
                  :value="data.id"
                />
              </template>
            </el-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        prop="email"
        label="邮箱"
      >
        <el-input
          v-model="data.email"
          size="small"
        > </el-input>
      </el-form-item>
      <el-form-item
        prop="description"
        label="备注"
      >
        <el-input
          v-model="data.description"
          size="small"
          type="textarea"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          @click="cancel"
          link
        >取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          :loading="inDialogData.btnLoading"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import { isvalidPhone, validEmail } from "@/utils/validate";
export default defineComponent({
  props: {
    modelData: {
      type: Object,
      default: () => { },
    },
    dialogData: {
      type: Object,
      default: () => { },
    },
    companyData: {
      type: Array,
      default: () => { },
    },
  },
  emits: ["update:modelData", "update:dialogData", "submit", "cancel"],
  computed: {
    data: {
      get() {
        return this.modelData;
      },
      set(value) {
        this.$emit("update:modelData", value);
      },
    },
    inDialogData: {
      get() {
        return this.dialogData;
      },
      set(value) {
        this.$emit("update:dialogData", value);
      },
    },
  },
  data() {
    const validMail = (rule, value, callback) => {
      if (value == "" || value == null) {
        callback();
      } else if (validEmail(value)) {
        callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      Rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "change" }],
        companyId: [
          { required: true, message: "请选择所属公司", trigger: "change" },
        ],
        email: [
          {
            required: false,
            validator: validMail,
            message: "请输入正确的邮箱",
            trigger: "change",
          },
        ],
        telphone: [
          {
            required: false,
            validator: validPhone,
            message: "请输入正确的手机号",
            trigger: "change",
          },
        ],
      },
      deptData: [],
    };
  },
  watch: {
    "data.companyId"(newVal) {
      this.debounce(this.getDeptTreeData(), 500)
    }
    },
  methods: {
    debounce(fn, wait) {
      let timeout = null;
      return function () {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
      }
    },
    getDeptTreeData() {
      this.$http
        .get("/api/department/buildTreeFilter", {
          deptId: this.data.id,
          CompanyId: this.data.companyId,
        })
        .then((res) => {
          this.deptData = res;
        })
    },
    submit() {
      this.$emit("submit", this.deptData);
    },
    cancel() {
      this.$emit("cancel");
    },
  },
  mounted() { },
});
</script>

<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;
}
</style>
